<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <style>
    #app {
      height: 300px;
      width: 404px;
      background-color: gray;
    }
    .btn {
      background-color: #ffa500;
      border: 1px solid salmon;
      width: 200px;
      height: 50px;
      text-align: center;
      color: white;
      float: left;
    }
    ul {
      float: left;
    }
    .test {
      background-color: cadetblue;
    }
  </style>
  <body>
    <div id="app">
      <div>
        <div
          v-for="(v,i) in arr"
          :key="v.id"
          class="btn"
          :class=" currentIndex == i ?'test':'test1'"
        >
          <p @click="btnClick(v,i)">{{v.name}}</p>
        </div>

        <div>
          <ul v-for="(v,i) in arr" v-if="currentIndex  == i">
            <li v-for="item in v.children">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            currentIndex: 0,
            // flag:false,
            arr: [
              {
                id: 1,
                name: "社会新闻",
                flag: false,
                children: [
                  { id: 1, name: "油价上涨了" },
                  { id: 2, name: "又该核酸了" },
                ],
              },
              {
                id: 2,
                name: "娱乐新闻",
                flag: false,
                children: [
                  { id: 1, name: "周杰伦" },
                  { id: 2, name: "最伟大的作品" },
                ],
              },
            ],
          };
        },
        methods: {
          btnClick(v, i) {
            (this.currentIndex = i),
              //修改状态
              // console.log(i);
              // console.log(v);
              // console.log(v.flag);
              // console.log(this.flag);

              (this.flag = !this.flag);

            // item.flag =! item.flag
          },
        },
      });
    </script>
  </body>
</html>
